<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2018-05-10
  Time: 12:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>

<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/bootstrap/css/bootstrap.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/table/bootstrap-table.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/table/locale/bootstrap-table-zh-CN.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/table/bootstrap-table.min.css">
<script type="text/javascript">

    $(function () {
        $("#table").bootstrapTable({
            url:"${pageContext.request.contextPath}/User/GetPersonAllInfo",
            columns:[{
                    field:"id",
                    title:"编号",
            },{
                field:"name",
                title:"姓名"
            },{
                field:"sex",
                title:"性别",
                formatter:function (value,row,index) {
                    return value==1?"男":"女";
                }
            },{
                field:"profession",
                title:"职业"
            },{
                field:"createTime",
                title:"创建时间"
            },{
              field:"updataTime",
              title:"修改时间"
            },{
                title:"操作"
            }],
            detailView:true,
            onExpandRow:function(index,row,$detail){
                $detail.html(row.name);
            },
            queryParamsType:"",
            queryParams:queryparams,
            height:360,
            pageList:[5,10,15],
            pageNumber:1,
            pageSize:5,
            pagination:true,
            sidePagination:'server'
            }
        )
    })
    function queryparams(params) {
        var temp={
            pageSize:params.pageSize,
            pageNumber:params.pageNumber,
            name:params.name,
            sex:params.sex
        }
        return temp;
    }
    function search() {
        var options=$("#table").bootstrapTable("getOptions");
        var name=$("#name").val();
        var sex=$("#sex").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/User/GetPersonAllInfo",
            data:{"name":name,"sex":sex,"pageSize":options.pageSize,"pageNumber":options.pageNumber},
            dataType:"json",
            success:function (data) {
                $("#table").bootstrapTable("load",data);
            }
        })}


</script>
<body>

<div class="panel panel-default">
    <div class="panel-body">
        <form class="form-inline">
            <div class="form-group">
                姓名：<input id="name" type="text" class="form-control" placeholder="搜索内容">
            </div>
            性别:
            <select id="sex" class="form-control">
                <option value="-1">全部</option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
            <button onclick="search()" type="button" class="btn btn-default">查询</button>
        </form>
    </div>
</div>



<table id="table"></table>
</body>
</html>
